<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>注册页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<style>
	html {
		height: 100%;
		margin: 0;
		background-image: url("{{ url_for('static', filename='img/login.jpg') }}");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}  
	  
	.container {  
		max-width: 400px;
        padding: 20px;
		background-color: #fff;  
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
		border-radius: 5px;
        margin: 50px auto 0;
    }
	  
	h1 {  
		text-align: center;  
	}  
	  
	.form-group {  
		margin-bottom: 15px;  
	}  
	  
	label {  
		display: block;  
		margin-bottom: 5px;  
	}  
	  
	input[type="text"],input[type="email"],input[type="password"] {  
		width: 100%;  
		border-radius: 3px;  
		border: 1px solid #ccc;
		padding: 10px; /* 表单元素的内边距 */
		box-sizing: border-box; /* 确保宽度包含内边距 */ 
	}  
	  
	button[type="submit"] {  
		width: 100%;  
		padding: 10px;  
		background-color: #4CAF50;  
		color: white;  
		border: none;  
		border-radius: 3px;  
		cursor: pointer;
		padding: 10px; /* 按钮的内边距 */
		box-sizing: border-box; /* 确保宽度包含内边距 */  
		margin-bottom: 20px; /* 按钮下方的外边距为20px */	
	}  
	  
	button[type="submit"]:hover {  
		background-color: #45a049;  
	}
</style>

<body>  
	<div class="container">  
		<h1>注册账号</h1>
		<form id="registerForm">
			<div class="form-group">  
				<label for="username">用户名:</label>  
				<input type="text" id="username" name="username" required>  
			</div>  
			<div class="form-group">  
				<label for="email">电子邮件:</label>  
				<input type="email" id="email" name="email" required>  
			</div>
            <div class="form-group">
				<label for="phone">手机号码:</label>
				<input type="text" id="phone" name="phone" required>
			</div>
			<div class="form-group">  
				<label for="password">密码:</label>  
				<input type="password" id="password" name="password" required>  
			</div>  
			<div class="form-group">  
				<label for="confirmPassword">确认密码:</label>
				<input type="password" id="confirmPassword" name="confirmPassword" required>
			</div>
            <div>
                <p id="confirmPasswordDiv" style="color: red; font-size: 12px"></p>
            </div>
			<button type="submit">注册</button>
            <div style="text-align: right;">
                <a href="/user/loginPage" >返回登录</a>
            </div>
		</form>
		<div id="successMessage" style="display: none; color: green;">注册成功！正在跳转到登录页面...</div>  
		<div id="errorMessage" style="display: none; color: red;">注册失败，请检查您的输入或稍后重试。</div> 
	</div>
</body>

<script>  
	document.getElementById('registerForm').addEventListener('submit', function(event) {  
		event.preventDefault(); // 阻止表单的默认提交行为  
	  
		// 收集表单数据  
		var formData = new FormData(this);
        // 将数据转换为JSON格式
		const data = JSON.stringify({
			'username': formData.get('username'),
            'email': formData.get('email'),
            'phone': formData.get('phone'),
			'password': formData.get('password'),
            'confirmPassword': formData.get('confirmPassword')
		});
        console.log(data)

        var password = formData.get('password');
        var confirmPassword = formData.get('confirmPassword')
        if (password != confirmPassword) {
            $("#confirmPasswordDiv").html("两次输入密码不一致!")
        } else {
            $("#confirmPasswordDiv").html("")
            registerAjax(data);
        }

		// 发送AJAX请求
        function registerAjax(data) {
             $.ajax({
                url: '/user/register',
                data: data,
                contentType: 'application/json',
                dataType: 'json',
                method: 'POST',
                success: function (res) {
                    console.log(res)
                    if (res.code === 200) {
                        document.getElementById('successMessage').style.display = 'block';
                        setTimeout(function (){
                            window.location.href = '/user/loginPage';
                        },3000)
                    } else {
                        document.getElementById('errorMessage').style.display = 'block';
                        window.alert(res.msg)
                    }
                },
                error: function () {
                    alert("异常!")
                }
            })
        }

	});  
</script>

</html>